use yew::function_component;
use yew::html;
use yew::Html;
use yew::Properties;
use yew::UseStateHandle;
use crate::types::Account;
use crate::components::safe_html::SafeHtml;

#[derive(Clone, PartialEq, Properties)]
pub struct Props {
    pub account: UseStateHandle<Account>,
}

#[function_component]
pub fn UserCardComponent(props: &Props) -> Html {
    let Props { account } = props;

    let fields_render = account.fields.iter().map(|field| html! {
        <>
            <p><b>{field.name.clone()}</b></p>
            <SafeHtml html={field.value.clone()}/>
        </>
    });

    html! {
        <div class="user-card">
            <div class="main-bar">
                <span class="main-title">
                    <p><b>{"⟳   ⌂   "}{account.url.clone()}{" ✕"}</b></p>  
                </span>
            </div>
            <div class="main-page">
                <img src={account.avatar.clone()} width="150" height="150"/>
                <p><b>{account.display_name.clone()}</b> {"  "} <a href={account.url.clone()}>{account.username.clone()}{"@"}{env!("SERVER_URL")}</a></p>
                <SafeHtml html={account.note.clone()} />
                {for fields_render}
                <p><b>{"followers"}</b></p>
                <p>{account.followers_count.clone()}</p>
            </div>
        </div>
    }
}
